<template>
	<view class="container" style="overflow: hidden;">
		<u-skeleton rows="5" :loading="loading" :title="false" :rowsWidth="[430, 720, 720, 720, 720]" :rowsHeight="[60, 800, 250, 200]">
		<view class="mainPage">
			
			<view class="contentArea" style="overflow-x: hidden; overflow-y: hidden;">
				<view class="ownerInfo">
					<u-avatar :src="userInfo.baseInfo.userAvatar" shape="circle" size="90" mode="aspectFill"></u-avatar>
					<view class="baseInfo">
						<view class="nickname" style="font-size: 1rem; font-weight: bold;">
							{{userInfo.baseInfo.userNickName}}
						</view>
						<view class="tags">
							<u-tag style="margin-right: 15upx; margin-top: 20upx;" v-for="(item, index) in userInfo.baseInfo.tags" :text="item" size="mini" type="warning"></u-tag>
						</view>
					</view>
				</view>
				
				<view class="FirstFloor">
					<view class="content">
						{{content}}
					</view>
					<view v-if="userInfo.coverPics.length != 0" class="cover">
							<image v-for="(item, index) in userInfo.coverPics" :src="item.cover" mode="aspectFit" @click="showImage(item)"></image>
					</view>
				</view>
			</view>
		</view>
		
		<commentsList class="commentsArea" :commentsList="userInfo.commentsList"></commentsList>
		
		 <view class="bottomArea" :style="{bottom:inputBottom + 'px'}" style="transition: all 0.2s ease-in;">
		 	<view class="inputArea" :style="{width: inputWidth + '%'}">
		 		<input class="input" v-model="commentToActicle" @focus="focusFunc" @blur="blurFunc"  
									 placeholder="请输入评论" clearable type="text" autoHeight confirm-type="send" 
									 :adjust-position="false"
									 style="font-size: 0.8rem; border: 1px solid darkgrey; height:50upx; width: 100%;border-radius: 15px;padding-right: 10upx; padding-left: 10upx;"
									 />
				<view class="send" @click="send()">发送</view>
		 	</view>
			
			<view class="interaction" v-show="interactionShow" style="transition: all 0.2s ease-in;">
				<div id="reSetIcon" class="t-icon t-icon-pinglun" @click="seeComments()">
					<div>{{commentCount}}</div>
				</div>
				<div id="reSetIcon" class="t-icon t-icon-favorites" @click="isCollect = !isCollect">
					<div>{{collections}}</div>
				</div>
				<div id="reSetIcon" class="t-icon" :class="[isLikeThisArticle==false?'t-icon-dianzan':'t-icon-dianzan-copy']" @click="likeThisArticle">
					<div>{{likesCount}}</div>
				</div>
			</view>
		 </view>
		</u-skeleton>	
	</view>
</template>

<script>
	export default{
		data(){
			return {
				loading: false,
				inputBottom:0,
				inputWidth:55,
				isLoaded: false,
				id:undefined,
				interactionShow: true,
				isLikeThisArticle:false,
				commonNavbarLoaded:false,
				screenHight: 0,
				navTop:0,
				likesCount: 10,
				commentCount: 20,
				collections: 10,
				isCollect: false,
				commentToActicle: "",
				timeUtil: new Date(),
				content: "并且确保数据类型和格式与组件要求的一致。另外，如果数据传递时存在问题，也会导致报错。我们需要确保传递给u-swiper组件的数据是以特定格式的对象数组的形式传递的。最后，如果以上解决方法均无效，可以尝试更新uView的版本或者联系uView社区或支持团队获取更进一步的帮助。最后，如果以上解决方法均无效，可以尝试更新uView的版本或者联系uView社区或支持团队获取更进一步的帮助。",
				userInfo:{
					baseInfo:{
						userAvatar: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
						userNickName: "暮商十二",
						tags:["油专", "虚动智能", "2021级"], 
						isVip: this.$store.state.loginUser.userBaseInfo.isVip,
						postId: 0,
						//请注意，content应当也是html格式
						title:'关于油专大运会志愿者培训的一些事',
					},
					coverPics:[
						{
							id: 0,
							cover: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15"
						},
						{
							id: 1,
							cover: "https://i1.hdslb.com/bfs/archive/a458ecf36ce5ad1b0f696d19ef93ac7a713660c1.jpg"
						},
						{
							id: 2,
							cover: "https://img2.baidu.com/it/u=3687842729,3134101122&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888"
						},
						{
							id: 3,
							cover: "https://img0.baidu.com/it/u=2249925780,1280417922&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500"
						}
					],
					commentsList:[
						{
							id: 0,
							userIsVip:true,
							isLike: false,
							headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
							nickName: "恐龙卧底", //待优化方向：昵称可以加入简单的图标？
							userTag: "前端开发者",
							content: "+3\nghsioghjsioarhgoanfiuhsofheGBNJDSHGFKLNGAHGNJDAHG;O",
							time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
							likes: 6, //点赞数量
							// 待加入功能： 层中层
							childrenComments:[
								{
									id: 5,
									userIsVip:true,
									isLike: false,
									replyTo:'',
									headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
									nickName: "恐龙卧底", //待优化方向：昵称可以加入简单的图标？
									userTag: "前端开发者",
									content: "+3\nghsioghjsioarhgoanfiuhsofheGBNJDSHGFKLNGAHGNJDAHG;O",
									time: "2011-11-11", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
									likes: 6, //点赞数量
									// 待加入功能： 层中层
									replyTo: '',
									kidComments:[]
								},
								{
									id: 6,
									userIsVip:true,
									isLike: false,
									replyTo:'',
									headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
									nickName: "恐龙卧底", //待优化方向：昵称可以加入简单的图标？
									userTag: "前端开发者",
									content: "+3\nghsioghjsioarhgoanfiuhsofheGBNJDSHGFKLNGAHGNJDAHG;O",
									time: "2022-11-11", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
									likes: 6, //点赞数量
									// 待加入功能： 层中层
									kidComments:[]
								}
							]
						},
						{
							id: 1,
							userIsVip:false,
							isLike: false,
							headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
							nickName: "油专丁真", //待优化方向：昵称可以加入简单的图标？
							userTag: "打油部长",
							content: "扶戈威武士",
							time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
							likes: 6, //点赞数量
							// 待加入功能： 层中层
							childrenComments:[]
						},
						{
							id: 2,
							userIsVip:true,
							isLike: false,
							headPic: "https://pic.rmb.bdstatic.com/bjh/beautify/1d30a8ef206b0855ef6fba21c1a6b2d8.png@c_1,w_1427,h_803,x_201,y_15",
							nickName: "Rory", //待优化方向：昵称可以加入简单的图标？
							userTag: "油院丁真",
							content: "超长文本溢出测试: fsnefuhncjoasgfiBNEFOwuehfuioewhfbojNDFJSDn kcjbWIURFHOWIUehrfuohWOFNDLSJ个HFOHJOFHLKMLKHOSJDKMKGHSJISJDSGDJGLNM,SBKLFHnbfjiashefnlfkfoawefkahjfioqahfhbafhG;heoiht'WPIHFGNBJdsfnjdb;fhdbsuHF'Pwejjfknskjmbfgjiasghuoahgnk",
							time: "", //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
							likes: 2, //点赞数量
							// 待加入功能： 层中层
							childrenComments:[]
						},
					]
				}
			}
		},
		methods:{
			init(id){
				uni.request({
					url:''+id,
					method:'GET',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					}
				}).then(res => {
					console.log(res)
					//处理
					this.loading = false
				})
			},
			getTime(){
				return this.timeUtil.toLocaleDateString().replaceAll('/','-')
			},
			showImage(image){
				uni.previewImage({
					urls:[image.cover]
				})
			},
			send(){ //发送对文章评论
				this.inputBottom = 0
				if(this.commentToActicle){
					uni.request({
						method:'POST',
						url:"http://192.168.31.146:8090/",
						header: this.$store.state.loginUser.token,
						data:{
							
						}
					}).then(res => {
						this.userInfo.commentsList.push({
							id: this.userInfo.commentsList.length,
							userIsVip: this.$store.state.loginUser.userBaseInfo.isVip,
							isLike: false,
							headPic: require(`${this.$store.state.loginUser.userBaseInfo.avatar}`),
							nickName: this.$store.state.loginUser.userBaseInfo.nickName, //待优化方向：昵称可以加入简单的图标？
							userTag: this.$store.state.loginUser.userBaseInfo.tagList,
							content: this.commentToArticle,
							time: this.getTime(), //留言时间，格式为 yyyy-mm-dd, 待优化方向：一个月内显示几天前？几周前？
							likes: 0, //点赞数量
							// 待加入功能： 层中层
							childrenComments:[
								{
									
								}
							],
						});
					})
					this.commentToActicle = ''
					this.commentCount = this.userInfo.commentsList.length
				}
			},
			focusFunc(e){
				this.inputBottom = e.detail.height
				this.interactionShow = false
				this.inputWidth = 90
				//console.log(e)
				/*
				uni.onKeyboardHeightChange(res => {
					//console.log(res.height);
					that.inputBottom = res.height
				})*/
			},
			
			blurFunc(e){	
				this.inputBottom = 0;
				this.interactionShow = true
				this.inputWidth = 55
				
				/*
				uni.onKeyboardHeightChange(res => {
					//console.log(res.height)
					that.inputBottom = 0;
				})*/
			},
			
			likeThisArticle(){
				this.isLikeThisArticle = !this.isLikeThisArticle
			},
		},
		onLoad(options) {
			//this.init()
		}	
	}
</script>

<style scoped>
	.mainPage{
		width: 96%;
		margin: 0 auto;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow-y: scroll;
		position: relative;
	}
	.cover, .contentArea, .commentsArea{
		margin: 0 auto;
	}
	.cover::after, .contentArea::after{
		content: "";
		display: flex;
		position: relative;
		top: 10rpx;
		height: 1rpx;
		background-color: rgba(216, 216, 216, 0.618);
	}
	.contentArea{
/* 		padding-left: 50upx;
		padding-right: 50upx; */
		width: calc(100% - 100upx);
	}
	.cover::after{
		width: 80%;
		transform: translate(10%);
	}
	.contentArea::after{
		top: 15rpx;
		width: 80%;
		transform: translate(10%);
	}
	.cover{
		position: relative;
		width: 100%;
		margin-top: 10upx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.cover>image{
		width: 100%;
		margin-bottom: 5upx; 
		border-radius: 10upx;
	}
	.contentArea{
		position: relative;
		display: flex;
		flex-direction: column;
		top: ;
		width: 94%;
		padding: 20rpx;
		padding-bottom: 0px !important;
		margin-bottom: 30rpx;
	} 
	.content{
		position: relative;
		width: 100%;
		word-wrap: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 1.5px;
		line-height: 50upx;
	}
	.baseInfo{
		position: relative;
		left: 100upx;
		top: -90upx;
	}
	.tags{
		position: relative;
		top: -10rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.FirstFloor{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		top: -70upx;
		width: 100%;
		margin: 0 auto;
		min-height: 200upx;
		
	}
	.commentsArea{
		position: relative;
		top: 10rpx;
		flex-direction: column;
		width: 93%;
		min-height: 500rpx;
		padding-bottom: 90upx;
	}

	::v-deep .thoughtTags{
		display: inline-block;
		border-radius: 2rpx;
		margin-right: 4rpx;
	}
	.bottomArea{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 80rpx;
		background-color: ghostwhite;          
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2rpx solid rgba(234, 234, 234, 1.0);
	}
	.inputArea{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.input{
		width: 100%;
		margin-left: 26rpx;
	}
	.interaction{
		height: 70%;
		width: 35%;
		margin-right: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	#reSetIcon{
		width: 1.6rem;
		height: 1.6rem;
	}
	#reSetIcon>div{
		position: relative;
		left: 50rpx;
	}
	
	.send{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		letter-spacing: 6rpx;
		left: 2%;
		padding: 6rpx;
		width: 25%;
		height: 45rpx;
		border-radius: 8px;
		color: white;
		font-size: 0.8rem;
		background-color: deepskyblue;
	}
</style>